<template>
  <div class="board">
    <div class="header">
      <div class="header_left"></div>
      <div class="header_mid">
        <h3 style="font-style:normal;font-family:微软雅黑;font-size:28px">标注运营看板</h3>
      </div>
      <div class="header_right">
        <div class="time_box"
          data-label="时间">
          <!-- <span calss="time">2021/10/24 下午12:11:12</span>
                    <span class="work">星期日</span> -->
          <span calss="time">{{nowDate}}</span>
        </div>
      </div>
    </div>
    <div class="content_box">
      <div class="content_row">
        <div class="left">
          <Box @dropDownClick="aaa"
            class="box1">
            <!-- <Drawer drawerTitle="测试标题">
              <div><img src="~assets/boardImg/u189.png" /><span>任务书</span></div>
              <h5 style="marign:5px 0px;line-height:20px">文本分类是按照您的的规则对文本进行属性分类，基于百度标注基地人力可实现百万级文本的分类操作，助力NLP模型训练，可应用于智能客服、智慧金融、智能驾驶等场景。</h5>

            </Drawer>
            <Drawer drawerTitle="测试标题">
              <div><img src="~assets/boardImg/u189.png" /><span>任务书</span></div>
              <h5 style="marign:5px 0px;line-height:20px">文本分类是按照您的的规则对文本进行属性分类，基于百度标注基地人力可实现百万级文本的分类操作，助力NLP模型训练，可应用于智能客服、智慧金融、智能驾驶等场景。</h5>

            </Drawer>
            <Drawer drawerTitle="测试标题">
              <div><img src="~assets/boardImg/u189.png" /><span>任务书</span></div>
              <h5 style="marign:5px 0px;line-height:20px">文本分类是按照您的的规则对文本进行属性分类，基于百度标注基地人力可实现百万级文本的分类操作，助力NLP模型训练，可应用于智能客服、智慧金融、智能驾驶等场景。</h5>

            </Drawer> -->
          </Box>
        </div>
        <div class="mid">
          <BoxTMiddle>
          </BoxTMiddle>
        </div>
        <div class="right">
          <BoxTRight>
          </BoxTRight>
        </div>
      </div>
      <div class="content_row">
        <div class="left">
          <BoxBLeft @dropDownClick="aaa">
          </BoxBLeft>
        </div>
        <div class="mid">
          <BoxBMiddle>
          </BoxBMiddle>
        </div>
        <div class="right">
          <BoxBRight>
          </BoxBRight>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Box from "./box.vue";
import BoxBLeft from "./boxBLeft.vue";
import BoxBRight from "./boxBRight.vue";
import BoxBMiddle from "./boxBMiddle.vue";
import BoxTMiddle from "./boxTMiddle.vue";
import BoxTRight from "./boxTRight.vue";
import Drawer from "./drawer.vue";
export default {
  components: {
    Box,
    BoxBLeft,
    BoxBRight,
    BoxBMiddle,
    // Drawer,
    BoxTMiddle,
    BoxTRight
  },
  data() {
    return {
      nowDate: "" // 当前日期
    };
  },
  methods: {
    // 接收到子组件传过来的菜单点击事件
    aaa(idx) {
      //   console.log("-----", idx);
    },
    // 当前时间
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day}  ${hour}:${minute}:${second} ${weekArr[week]}`;
    }
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
  mounted() {
    this.currentTime();
  }
};
</script>

<style lang="scss" scoped>
.board {
  // background-color: rgba(6, 18, 56, 1);
  min-height: 100%;
  width:100%;
  max-width:1920px;
  background: url(~assets/boardImg/dasdw.png) #121529 top center no-repeat;
  background-size:100% 100%;
  .header {
    display: flex;
    // height: 80px;
    // height: 30px;
    // margin:0;
    background: url(~assets/boardImg/u130.svg) center no-repeat;
    // background-size:100% 100%;
    .header_left,
    .header_mid,
    .header_right {
      flex: 1;
    }
    .header_left {
      background: url(~assets/boardImg/u28.svg) 20px 10px no-repeat,
        url(~assets/boardImg/u132.svg) 70px 10px no-repeat;
    }
    .header_mid {
      display: flex;
      align-items: center;
      h3 {
        font-size: 22px;
        color: #fff;
        text-align: center;
        width: 100%;
      }
    }
    .header_right {
      display: flex;
      flex-direction: row-reverse;
      .time_box {
        padding: 20px 10px 0 0;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
      }
    }
  }
  .content_box {
    padding: 30px 10px 10px 10px;
    // margin-bottom:20px;
    .content_row {
      display: flex;
      margin-bottom: 10px;
      .left {
        flex: 1;
        margin-right: 10px;
        // min-width:3rem;
      }
      .mid {
        width: 750px;
        margin-right: 10px;
      }
      .right {
        flex: 1;
        // min-width:3rem;
      }
    }
    .box1 {
      color: #fff;
    }
  }
}
</style>